<%@ include file="/taglibs.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head>
	<link href="${ctx}/css/pagination.css" rel="stylesheet" type="text/css" />
	<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/scripts/jquery-1.7.js" type="text/javascript"></script>
	<script type="text/javascript">
		function openVideo(obj, categoryId){
			openwindow("${ctx}/VideoAction_playVideo?videopath=" + obj + "&categoryId=" + categoryId, "视频播放",440,370);
		}
	
		function openwindow(url,name,iWidth,iHeight){
			var url; //转向网页的地址;
			var name; //网页名称，可为空;
			var iWidth; //弹出窗口的宽度;
			var iHeight; //弹出窗口的高度;
			var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
			var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
			window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
		}
		
		$(document).ready(function() {
			$(".list-ul li:even").css("background", "#ffffff");
			$(".list-ul li:odd").css("background", "#fdf3bf"); 
		});
	</script>
</head>
<body style="width:700px;">
	<input id="categoryIdInput" name="categoryIdInput" type="hidden" value="<s:property value='#request.categoryId' />" />
	<s:if test="#request.videos == null || #request.videos.size == 0">
		<div style="clear:both; height:100px;">&nbsp;</div>
		<div style="text-align:center;">
			<span style=" font-size:14px; color:#ce3a00; font-weight:bold; ">对不起，没有对应该类别的视频!</span>
		</div>
	</s:if>
	<s:else>
		<ul style="margin:0px; padding:0px; width:700px;" class="list-ul">
		<s:iterator value="#request.videos" status="st">
			<li style="border-bottom:dotted 1px #ffbb66; list-style:none; padding:0px; margin:0px;">
				<table cellpadding="0" cellspacing="0">
		            <tr>
		                <td style="min-height:102px; width:155px;  vertical-align:top;  position:relative; display:block;">
		                	<img src="${ctx }<s:property value='picPath' />" alt=""  style=" position:relative; width:147px; height:102px; border:solid 1px #cccccc;"/>
							<img src="${ctx}/styles/video_player_layer.png" alt="" onclick="openVideo('<s:property value='videopath' />', '<s:property value='categoryId' />')" style="position:absolute; top:0; left:0; width:145px; height:100px; cursor:pointer;"/>
						</td>
		                <td style="width:15px;">&nbsp;</td>
		                <td style=" text-align:left; vertical-align:top;">
		                    <a href="#" onclick="openVideo('<s:property value='videopath' />', '<s:property value='categoryId' />')" style="display:block; height:18px; font-weight:bold;" title="<s:property value="name" />">
		                    	<s:if test="%{name.length()>80}">
		                    		<s:property value="name.substring(0,80)+'...'" />
		                    	</s:if>
		                    	<s:else>
		                    		<s:property value="name" />
		                    	</s:else>
		                    </a>
		                    <span><b>上传时间：</b><s:property value="simpleUploadDate"/></span>
		                    <span style="display:block; min-height:60px;"><b>视频简介：</b>
		                    	<s:property value="introduction"/>
		                    </span>
		                    <br/>
		                </td>
		            </tr>
		        </table>
		        <div style="height:15px;">&nbsp;</div>
			</li>
		</s:iterator>	
		</ul>
		<div style="clear:both; height:10px;"></div>
		<div style="margin-left:0; text-align: center;">
			<s:property value="#request.paginationCode" escape="false"/>
		</div>
		<script type="text/javascript">
			// Add the status into the link
			$(function(){
				var categoryId = $("#categoryIdInput").val();
				if(categoryId != null && categoryId.length > 1){
					var alinks = $("a:[href^='/DetailsAction_details?pageNow']");
					var index = 0;
					for(; index < alinks.length; index = index + 1){
						$(alinks[index]).attr("href", $(alinks[index]).attr("href") + "&categoryId=" + categoryId);
					}
				}
			});
		</script>
	</s:else>
</body>
</html>